<template>
    <div>
        <div class="page-box">
            <div class="page">
                 <img :src="detailListIcon(manageMoneyDetailInfo.typeName)"/>
                 <p style="font-size: 16px;font-weight: 500;">{{manageMoneyDetailInfo.manageMoneyBookName}}<br>{{manageMoneyDetailInfo.remark}}</p>
             
                 <p style="font-size:24px;font-weight: bold;"><span v-if="manageMoneyDetailInfo.way == '支出'">-&nbsp;</span>{{manageMoneyDetailInfo.money}}</p>
                <van-divider />
                
                 <p  style="text-align:left;    margin: 0px;    padding-bottom: 4px;color: #969799;">支出/收入：{{manageMoneyDetailInfo.way}}</p>
                 <p  style="text-align:left;    margin: 0px;    padding-bottom: 4px;color: #969799;">{{manageMoneyDetailInfo.way}}类型：{{manageMoneyDetailInfo.typeName}}</p>
                 
                 <p style="text-align:left;    margin: 0px;    padding-bottom: 4px;color: #969799;">创建时间：{{returnDate()}}</p>
                 <p  style="text-align:left;    margin: 0px;    padding-bottom: 32px;color: #969799;">所属账本：{{manageMoneyDetailInfo.expenseBookName}}</p>
                 <van-button type="danger" size="small" @click="delFunc()">删除</van-button>
            </div>
        </div>
    </div>
</template>
<script>


    import workicon from '../../assets/managemoney/types/work-icon.png'
    import buyicon from '../../assets/managemoney/types/buy-icon.png'
    import trafficicon from '../../assets/managemoney/types/traffic-icon.png'
    import defaulticon from '../../assets/managemoney/types/default-icon.png'

    import workiconselected from '../../assets/managemoney/types/work-icon-selected.png'
    import buyiconselected from '../../assets/managemoney/types/buy-icon-selected.png'
    import trafficiconselected from '../../assets/managemoney/types/traffic-icon-selected.png'
    import defaulticonselected from '../../assets/managemoney/types/default-icon-selected.png'


    import 'vant/lib/index.css';
    import { Divider,Button,Dialog   } from 'vant';

    import wx from 'weixin-js-sdk';
    import axios from 'axios';


export default {
    components: {
        [Divider.name]: Divider,
        [Button.name]: Button,
        [Dialog.name]: Dialog,
    },
    data(){
        return{
            manageMoneyDetailInfo:{
                createTime: "",
                expenseBookId: "",
                expenseBookName:"",
                money: "",
                remark: '',
                typeName: "",
                way: "",
                createUserId:''
            },
            payOutTypeList:[
                {name:'办公用品',icon:workicon,iconselected:workiconselected},
                {name:'采购',icon:buyicon,iconselected:buyiconselected},
                {name:'交通',icon:trafficicon,iconselected:trafficiconselected},
                {name:'油费',icon:defaulticon,iconselected:defaulticonselected},
                {name:'房租',icon:defaulticon,iconselected:defaulticonselected},
                {name:'购物',icon:defaulticon,iconselected:defaulticonselected},
                {name:'手机话费',icon:defaulticon,iconselected:defaulticonselected},
                {name:'水费',icon:defaulticon,iconselected:defaulticonselected},
                {name:'电费',icon:defaulticon,iconselected:defaulticonselected},
                {name:'气费',icon:defaulticon,iconselected:defaulticonselected},
                {name:'娱乐',icon:defaulticon,iconselected:defaulticonselected},
                {name:'旅游',icon:defaulticon,iconselected:defaulticonselected}
            ],
            putInTypeList:[
                {name:'工资',icon:defaulticon,iconselected:defaulticonselected},
                {name:'预支款',icon:defaulticon,iconselected:defaulticonselected},
                {name:'奖金',icon:defaulticon,iconselected:defaulticonselected},
                {name:'转账',icon:defaulticon,iconselected:defaulticonselected},
                {name:'其他',icon:defaulticon,iconselected:defaulticonselected}
            ]
        }
    },
    created: function () {
        this.getManageMoneyDetailInfo();
       
        this.jsSDKConfig();
    },
    methods:{
        returnDate(){
            var value = this.manageMoneyDetailInfo.createTime;
            var date = '';
            if(value.date != undefined){
                    date = value.date.year + "年" + value.date.month + "月" + value.date.day + "日";
            }              
            return date;
        },
        delFunc(){
            var manageMoneyDetailId = this.$route.query.id;
            var that = this;

            Dialog.confirm({
                title: '系统提示',
                message: '删除后将无法找回！是否确认删除此明细',
            })
            .then(() => {
                // 上面的请求也可以这样做
                var ids = {ids:manageMoneyDetailId};
                 axios.post("/api/expenseBookDetail/delete",ids)
                .then(function (response) {
                    Dialog.alert({
                        title: '系统提示',
                        message: '删除成功',
                    }).then(() => {
                        that.$router.go(-1);

                    });
                })
                .catch(function (error) {
                    console.log(error);
                });
            })
            .catch(() => {
                // on cancel
            });

        },
        getManageMoneyDetailInfo(){ 

            var manageMoneyDetailId = this.$route.query.id;
            var that = this;
                // 上面的请求也可以这样做
            axios.get('/api/expenseBookDetail/info?id=' + manageMoneyDetailId)
            .then(function (response) {
                that.manageMoneyDetailInfo = response.data;
            })
            .catch(function (error) {
                console.log(error);
            });
        },
         detailListIcon(typeName){
            for(var i =0; i < this.payOutTypeList.length; i ++){
                if(this.payOutTypeList[i].name == typeName){
                    return this.payOutTypeList[i].iconselected;
                }
            }
            for(var i =0; i < this.putInTypeList.length; i ++){
                if(this.putInTypeList[i].name == typeName){
                    return this.putInTypeList[i].iconselected;
                }
            }
        },
        jsSDKConfig(){
                var url = encodeURIComponent(window.location.href.split('#')[0]);
                axios.get('/api/weixin/getJsConfig?url='+url)
                .then(function (response) {
                    var jsConfig = response.data.data;
                    wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: jsConfig.appId, // 必填，公众号的唯一标识
                        timestamp: jsConfig.timestamp, // 必填，生成签名的时间戳
                        nonceStr: jsConfig.nonceStr, // 必填，生成签名的随机串
                        signature: jsConfig.signature,// 必填，签名
                        jsApiList: ['hideAllNonBaseMenuItem','onMenuShareAppMessage','updateAppMessageShareData','showMenuItems'] // 必填，需要使用的JS接口列表
                    });
                    wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
                        wx.hideAllNonBaseMenuItem();
                    });
                    
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
    }
}
</script>
<style scoped>
.page-box{
    padding: 16px;

}
</style>